import { LineChart } from "echarts/charts";
import {
  DataZoomComponent,
  GridComponent,
  LegendComponent,
  MarkAreaComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
} from "echarts/components";
import * as echarts from "echarts/core";

import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

import { defineView } from "@/routers/tools.mjs";

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DataZoomComponent,
  MarkAreaComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);

/**
 * @satisfies {import('echarts').EChartsOption}
 */
const option = {
  title: {
    text: "Rainfall and Flow Relationship",
    left: "center",
  },
  grid: {
    bottom: 80,
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: "none",
      },
      restore: {},
      saveAsImage: {},
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      animation: false,
      label: {
        backgroundColor: "#505765",
      },
    },
  },
  legend: {
    data: ["Flow", "Rainfall"],
    left: 10,
  },
  dataZoom: [
    {
      show: true,
      realtime: true,
      start: 65,
      end: 85,
    },
    {
      type: "inside",
      realtime: true,
      start: 65,
      end: 85,
    },
  ],
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      axisLine: { onZero: false },
      /**
       * @type {string[]}
       */
      data: [],
      // d["xAxis.data"].map(function (str) {
      //   return str.replace(" ", "\n");
      // }),
    },
  ],
  yAxis: [
    {
      name: "Flow(m³/s)",
      type: "value",
    },
    {
      name: "Rainfall(mm)",
      nameLocation: "start",
      alignTicks: true,
      type: "value",
      inverse: true,
      max: 80,
    },
  ],
  series: [
    {
      name: "Flow",
      type: "line",
      areaStyle: {},
      lineStyle: {
        width: 1,
      },
      emphasis: {
        focus: "series",
      },
      markArea: {
        silent: true,
        itemStyle: {
          opacity: 0.3,
        },
        data: [
          [
            {
              xAxis: "2009/9/12\n7:00",
            },
            {
              xAxis: "2009/9/22\n7:00",
            },
          ],
        ],
      },
      /**
       * @type {number[]}
       */
      data: [],
      // d["series.Flow.data"],
    },
    {
      name: "Rainfall",
      type: "line",
      yAxisIndex: 1,
      areaStyle: {},
      lineStyle: {
        width: 1,
      },
      emphasis: {
        focus: "series",
      },
      markArea: {
        silent: true,
        itemStyle: {
          opacity: 0.3,
        },
        data: [
          [
            {
              xAxis: "2009/9/10\n7:00",
            },
            {
              xAxis: "2009/9/20\n7:00",
            },
          ],
        ],
      },
      /**
       * @type {number[]}
       */
      data: [],
      // d["series.Rainfall.data"],
    },
  ],
};

/**
 * @type {DefineView}
 */
const rainFallView = defineView({
  controller:
    /**
     * @implements {ng.IController}
     */
    class {
      option = option;

      /**
       * @type {HTMLElement | null}
       */
      chartDom = null;

      /**
       * @type {echarts.ECharts}
       */
      myChart;

      constructor() {
        this.chartDom = document.getElementById("RainFall");
        this.myChart = echarts.init(this.chartDom);
        this.resizeObserver = new ResizeObserver(() => {
          this.myChart.resize();
        });
      }

      $onInit() {
        import(
          /* webpackChunkName: "area-rainfall-json" */
          /* webpackMode: "lazy" */
          "./area-rainfall-data.json",
          {
            with: {
              type: "json",
            },
          }
        )
          .then((d) => {
            option.xAxis[0].data = d.default["xAxis.data"].map((str) =>
              str.replace(" ", "\n"),
            );
            option.series[0].data = d.default["series.Flow.data"];
            option.series[1].data = d.default["series.Rainfall.data"];
          })
          .finally(() => {
            this.initAreaRainfall();
            this.resizeObserver.observe(
              /**
               * @type {HTMLElement}
               */
              (this.chartDom),
            );
          });
      }

      initAreaRainfall() {
        this.myChart.setOption(this.option);
      }

      reInit() {
        this.initAreaRainfall();
      }

      $onDestroy() {
        this.myChart.dispose();
        this.resizeObserver.disconnect();
      }
    },
  controllerAs: "vm",
  template: /* HTML */ html`
    <div class="chart h-[400px]" id="RainFall"></div>
  `,
});

export default rainFallView;
